<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Expedia城市-POI列表</title>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.2.6.4.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all"/>
    <link rel="stylesheet" href="__CSS__/admin.css" media="all">
</head>
<body>
<div class="layui-fluid main">
    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend><a name="compatibility">Expedia酒店的城市详细数据</a></legend>
    </fieldset>
    <div class="layui-row">
        <div class="layui-col-md6" style="padding:0 16px;">
            <fieldset class="layui-elem-field layui-field-title site-title">
                <legend><a name="compatibility">城市信息</a></legend>
            </fieldset>
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">eId</label>
                    <div class="layui-input-block">
                        <input value="{$city.eId}" readonly class="layui-input" type="text">
                    </div>
                </div>
            </div>
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">中文名称</label>
                    <div class="layui-input-block">
                        <input value="{$city.name}" readonly class="layui-input" type="text">
                    </div>
                </div>
            </div>
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">英文名称</label>
                    <div class="layui-input-block">
                        <input value="{$city.nameEn}" readonly class="layui-input" type="text">
                    </div>
                </div>
            </div>
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                        <input value="{$city.name_full}" readonly class="layui-input" type="text">
                    </div>
                </div>
            </div>
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">经纬度</label>
                    <div class="layui-input-block">
                        <input value="{$city.coordinates.center_longitude},{$city.coordinates.center_latitude}" readonly class="layui-input" type="text">
                    </div>
                </div>
            </div>
            {if empty($city.boundCityId)}
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <a class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius checkExpediaCityRelation">检测城市关联</a>
                    </div>
                </div>
            </div>
            {/if}

        </div>
        <div class="layui-col-md6" style="padding:0 16px;">
            <fieldset class="layui-elem-field layui-field-title site-title">
                <legend><a name="compatibility">POI信息</a></legend>
            </fieldset>
            <table id="poiList" lay-filter="poiList" class="layui-table" lay-size="sm" lay-event="" lay-skin="">

            </table>
        </div>

    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="batchImport">批量导入</button>
        <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
        <!--<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
    </div>
</script>
</body>
<script src="__PUBLIC__/layui/layui.2.5.6.all.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'jquery'], function () {
        let table = layui.table;
        let form = layui.form;
        let eId = "{$_GET['eId']|default=''}";
        function renderTable(){
            table.render({
                elem: '#poiList'
                ,height: 'full-200'
                ,url: '/api/expedia_api/getExpediaPoiData?eId='+eId //数据接口
                // ,page: true //开启分页
                ,limit:1000
                ,cellMinWidth:120
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,cols: [[ //表头
                    {checkbox:true}
                    ,{field: 'eId', title: 'ID', sort: true}
                    ,{field: 'name', title: '中文名称',sort: true,
                        templet:function (d) {
                            var ok = '';
                            if(d.isBound){
                                ok = ' √️ ';
                            }
                            return '<p class="showContent">'+ ok +d.name+'</p>';
                        }}
                    ,{field: 'nameEn', title: '英文名称',sort: true}
                    ,{field: '', title: '经纬度',templet:function (d) {
                            return d.coordinates.center_longitude + ',' + d.coordinates.center_latitude
                        }}
                    // ,{field: '', title: '操作', width: 130, toolbar: '#barToolDemo',fixed:'right'}
                ]]
            });
        };
        renderTable();

        //头工具栏事件
        table.on('toolbar(poiList)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
                case 'batchImport':
                    batchImport(checkStatus.data);
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });
        function batchImport(data){
            if(data.length < 1) {layer.msg('请选中需要导入的项！！！');return false;}
            var cityId = "{$city.boundCityId|default=0}";
            if(cityId=='' || cityId=='0' || cityId==undefined){layer.msg('请检测并绑定城市！');return false;}
            layer.confirm('是否确认批量导入选中的'+data.length+'条数据',function () {
                var loading = layer.load(2);
                var poidata = JSON.stringify(data);
                $.post('/admin/expediacity/batchImportPoiByCityId',{cityId,poidata},function (res) {
                    layer.close(loading);
                    layer.msg(res.msg);
                    if(res.code > 0){
                        setTimeout(function () {
                            window.location.reload();
                        },1000)
                    }
                },'json')
            })
        }
        //OPEN打开页面索引
        var open_index = '';
        $('.checkExpediaCityRelation').click(function () {
            //执行检测
            var eId = '{$city.eId|default=""}';
            var pId = '{$city["eCountry"]|default=""}';
            var loading = layer.load(2);
            $.post('/api/expedia_api/checkExpediaCityCompareCityTable',{eId,pId},function (res) {
                layer.close(loading);
                if(res.code > 0){
                    //检测到已经绑定了 国家
                    if(res.msg=='Bound Country'){
                        // 01 直接绑定到国家 新增
                        // 02 绑定到国家下的城市
                        var title = '<div class="layui-elem-quote" style="font-size: 16px;">检测到该城市暂未绑定到定制系统，请选择以下方式进行数据绑定：</div>';
                        var city_option = getSelectOption(res.data.cityList);

                        var select_country = '<div class="layui-form"><div class="layui-inline" style="width: 220px"><input readonly class="layui-input" type="text" name="select_country" data-id="'+res.data.country.id+'" value="'+res.data.country.name+'('+res.data.country.eng_name+')"></div>' +
                            '<a style="margin-left: 10px;" class="layui-btn layui-btn-normal layui-btn-sm insertCityFromCountryHasCountry">新增</a></div>'
                        var select_city = getSelectCardBody('select_binding_city','请选择城市','bindCityFromCityHasCountry','绑定',city_option);

                        var select1_html = getSelectCard('方式1：在此国家下新增此城市！',select_country)
                        var select2_html = getSelectCard('方式2：选择城市 将此城市绑定到选择的城市！',select_city)

                        open_index = layer.open({
                            type:1,
                            title : '检测结果',
                            area:['60%','80%'],
                            content:'<div class="layui-bg-gray" style="padding:16px">'+title + select1_html + select2_html +'</div>'
                            ,success:function(){
                                form.render();
                            }
                            ,done:function () {
                                window.location.reload();
                            }
                        })
                    }else if(res.msg=='Need Binding Country'){
                        // 01 选择国家 然后新增
                        // 02 选择城市 然后绑定
                        var title = '<div class="layui-elem-quote" style="font-size: 16px;">检测到该城市暂未绑定到定制系统，请选择以下方式进行数据绑定：</div>';
                        var country_option = getSelectOption(res.data.countryList);
                        var city_option = getSelectOption(res.data.cityList);

                        var select_country = getSelectCardBody('select_binding_country','请选择国家','insertCityFromCountryNoCountry','新增',country_option);
                        var select_city = getSelectCardBody('select_binding_city','请选择城市','bindCityFromCityNoCountry','绑定',city_option);

                        var select1_html = getSelectCard('方式1：选择国家 并在国家下新增此城市！',select_country)
                        var select2_html = getSelectCard('方式2：选择城市 将此城市绑定到选择的城市！',select_city)

                        open_index = layer.open({
                            type:1,
                            title : '检测结果',
                            area:['60%','80%'],
                            content:'<div class="layui-bg-gray" style="padding:16px">'+title + select1_html + select2_html +'</div>'
                            ,success:function(){
                                form.render();
                            }
                            ,done:function () {
                                window.location.reload();
                            }
                        })

                    }
                }else{
                    layer.msg(res.msg);return false;
                }
            })

        })

        function getSelectOption(list){
            var option_html = '';
            $.each(list,function (i,v) {
                option_html += '<option value="'+v.id+'">'+v.name+'('+v.eng_name+')</option>';
            })
            return option_html;
        }

        function getSelectCardBody(select_name,select_title,btn_class,btn_title,country_option)
        {
            return '<div class="layui-form"><div class="layui-inline"><select lay-search="" name="'+select_name+'"><option value="">'+select_title+'</option>'+country_option+'</select></div>' +
                '<a style="margin-left: 10px;" class="layui-btn layui-btn-normal layui-btn-sm '+btn_class+'">'+btn_title+'</a></div>';
        }

        function getSelectCard(card_title,select_city)
        {
            return '<div class="layui-card">' +
                '<div class="layui-card-header">'+card_title+'</div>' +
                '<div class="layui-card-body">'+select_city+'</div></div>';
        }

        //绑定事件
        $(document).on('click','.insertCityFromCountryHasCountry',function () {
            var pId = $(this).parent().find("input").attr('data-id');
            if(pId=='' || pId==undefined){layer.msg('渲染错误！请关闭当前页面重试！');return false;}
            bindingExpediaCityToCityTable(eId,pId,'1')
        })
        $(document).on('click','.bindCityFromCityHasCountry',function () {
            var pId = $(this).parent().find("select").val();
            if(pId=='' || pId==undefined){layer.msg('请选择城市！');return false;}
            bindingExpediaCityToCityTable(eId,pId,'2')
        })
        $(document).on('click','.insertCityFromCountryNoCountry',function () {
            var pId = $(this).parent().find("select").val();
            if(pId=='' || pId==undefined){layer.msg('请选择国家');return false;}
            bindingExpediaCityToCityTable(eId,pId,'3')
        })
        $(document).on('click','.bindCityFromCityNoCountry',function () {
            var pId = $(this).parent().find("select").val();
            if(pId=='' || pId==undefined){layer.msg('请选择城市');return false;}
            bindingExpediaCityToCityTable(eId,pId,'4')
        })

        function bindingExpediaCityToCityTable(eId,pId,bindType)
        {
            var loading = layer.load(2);
            $.post('/api/expedia_api/bindingExpediaCityToCityTable',{bindType,eId,pId},function (res) {
                layer.close(loading);
                layer.msg(res.msg);
                if(res.code > 0){
                    setTimeout(function () {
                        window.location.reload();
                    },1000)
                }
            },'json');
            return false;
        }
    })
</script>
</html>